<template>
  <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal">
    <el-menu-item index="1" @click="navigate('/')">首页</el-menu-item>
    <el-menu-item index="2" @click="navigate('/users')">用户管理</el-menu-item>
    <el-menu-item index="3" @click="navigate('/photos')">照片管理</el-menu-item>
    <el-menu-item index="4" @click="navigate('/posts')">帖子管理</el-menu-item>
    <el-menu-item index="5" @click="navigate('/events')">活动管理</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '1', // 默认高亮
    };
  },
  methods: {
    navigate(path) {
      this.$router.push(path);
    },
  },
  watch: {
    $route(to) {
      this.activeMenu = this.getActiveMenuFromRoute(to.path);
    },
  },
  mounted() {
    this.activeMenu = this.getActiveMenuFromRoute(this.$route.path);
  },
  methods: {
    getActiveMenuFromRoute(routePath) {
      switch (routePath) {
        case '/users':
          return '2';
        case '/photos':
          return '3';
        case '/posts':
          return '4';
        case '/events':
          return '5';
        default:
          return '1';
      }
    },
  },
};
</script>

<style>
.el-menu-demo {
  background-color: #409eff;
  color: white;
}
.el-menu-demo .el-menu-item {
  color: white;
}
.el-menu-demo .el-menu-item:hover {
  background-color: #66b1ff;
}
</style>
